<template>
	<view class="detail-container">
		<!-- 头部信息 -->
		<view class="header-section">
			<view class="title-box">
				<uni-title type="h2" title="报告详情"></uni-title>
				<view class="subtitle">查看完整的报告内容</view>
			</view>
		</view>

		<!-- 报告信息卡片 -->
		<view class="report-card" v-if="reportData">
			<view class="report-header">
				<view class="employee-info">
					<text class="employee-name">报告人：{{ reportData.userName }}</text>
					<text class="report-date">日期：{{ reportData.aa }}</text>
				</view>
				<view class="report-type">
					<text class="type-tag" :class="reportType">{{ reportTypeText }}</text>
				</view>
			</view>

			<!-- 报告内容 -->
			<view class="report-content">
				<view class="content-section">
					<text class="section-title">报告内容</text>
					<view class="content-text" v-if="reportContent">
						<text>{{ reportContent }}</text>
					</view>
					<view class="content-text empty" v-else>
						<text>暂无报告内容</text>
					</view>
				</view>

				<!-- 班前报告部门内容 -->
				<view class="department-sections" v-if="reportType === 'banqian' && hasDepartmentContent">
					<view class="department-section" v-if="departmentContent.floor">
						<text class="dept-title">楼面部</text>
						<view class="dept-content">
							<text>{{ departmentContent.floor }}</text>
						</view>
					</view>
					<view class="department-section" v-if="departmentContent.business">
						<text class="dept-title">业务部</text>
						<view class="dept-content">
							<text>{{ departmentContent.business }}</text>
						</view>
					</view>
					<view class="department-section" v-if="departmentContent.dj">
						<text class="dept-title">DJ部</text>
						<view class="dept-content">
							<text>{{ departmentContent.dj }}</text>
						</view>
					</view>
				</view>

				<!-- 班后报告照片 -->
				<view class="photo-section" v-if="reportData.dd">
					<text class="section-title">现场照片</text>
					<view class="photo-container">
						<image 
							:src="reportData.dd" 
							mode="aspectFill" 
							@click="previewImage(reportData.dd)" 
							class="report-photo"
						></image>
					</view>
				</view>

				<!-- 评论区域 -->
				<view class="comment-section" v-if="reportData.tobb || reportData.tocc">
					<text class="section-title">评论</text>
					<view class="comment-content">
						<text class="comment-text">{{ reportData.tobb || reportData.tocc }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 加载状态 -->
		<view v-else-if="loading" class="loading-container">
			<uni-icons type="spinner-cycle" size="24" color="#409EFF"></uni-icons>
			<text>加载中...</text>
		</view>

		<!-- 错误状态 -->
		<view v-else class="error-container">
			<uni-icons type="info" size="24" color="#F56C6C"></uni-icons>
			<text>未找到报告数据</text>
		</view>

		<!-- 返回按钮 -->
		<view class="action-buttons">
			<button class="back-btn" @click="goBack">
				<uni-icons type="left" size="16" color="#409EFF"></uni-icons>
				<text>返回</text>
			</button>
		</view>
	</view>
</template>

<script>
import { getYeji } from '@/api/system/yeji'

export default {
	data() {
		return {
			loading: true,
			reportData: null,
			reportType: '', // 'banqian' 或 'banhou'
			reportTypeText: '',
			reportContent: '',
			departmentContent: {
				floor: '',
				business: '',
				dj: ''
			},
			hasDepartmentContent: false
		}
	},
	onLoad(options) {
		if (options.id) {
			this.loadReportDetail(options.id)
		} else {
			this.loading = false
		}
	},
	methods: {
		// 加载报告详情
		async loadReportDetail(id) {
			try {
				const res = await getYeji(id)
				if (res.code === 200 && res.data) {
					this.reportData = res.data
					this.parseReportData()
				} else {
					this.$modal.msgError('获取报告详情失败')
				}
			} catch (error) {
				console.error('获取报告详情失败：', error)
				this.$modal.msgError('获取报告详情失败')
			} finally {
				this.loading = false
			}
		},

		// 解析报告数据
		parseReportData() {
			if (!this.reportData) return

			// 判断报告类型
			if (this.reportData.bb) {
				this.reportType = 'banqian'
				this.reportTypeText = '班前报告'
				this.reportContent = this.reportData.bb
				this.parseBanqianContent()
			} else if (this.reportData.cc) {
				this.reportType = 'banhou'
				this.reportTypeText = '班后报告'
				this.reportContent = this.reportData.cc
			}
		},

		// 解析班前报告部门内容
		parseBanqianContent() {
			if (!this.reportContent) return

			// 尝试匹配各个部门的内容
			const floorMatch = this.reportContent.match(/楼面部：([\s\S]*?)(?=业务部：|DJ部：|$)/)
			const businessMatch = this.reportContent.match(/业务部：([\s\S]*?)(?=DJ部：|$)/)
			const djMatch = this.reportContent.match(/DJ部：([\s\S]*?)$/)

			// 提取内容
			this.departmentContent.floor = floorMatch ? floorMatch[1].trim() : ''
			this.departmentContent.business = businessMatch ? businessMatch[1].trim() : ''
			this.departmentContent.dj = djMatch ? djMatch[1].trim() : ''

			// 检查是否有部门内容
			this.hasDepartmentContent = !!(this.departmentContent.floor || this.departmentContent.business || this.departmentContent.dj)
		},

		// 预览图片
		previewImage(url) {
			if (url) {
				uni.previewImage({
					urls: [url],
					current: url
				})
			}
		},

		// 返回上一页
		goBack() {
			uni.navigateBack()
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #f5f7fa;
}

.detail-container {
	padding: 30rpx;
	min-height: 100vh;
}

.header-section {
	margin-bottom: 30rpx;
	
	.title-box {
		text-align: center;
		padding: 20rpx 0;
		
		:deep(.uni-title) {
			margin-bottom: 0;
			
			.uni-title__text {
				font-size: 36rpx;
				font-weight: 600;
				color: #303133;
			}
		}
		
		.subtitle {
			font-size: 28rpx;
			color: #909399;
			margin-top: 10rpx;
		}
	}
}

.report-card {
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);
	
	.report-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #ebeef5;
		
		.employee-info {
			display: flex;
			flex-direction: column;
			gap: 10rpx;
			
			.employee-name {
				font-size: 32rpx;
				font-weight: 600;
				color: #303133;
			}
			
			.report-date {
				font-size: 26rpx;
				color: #909399;
			}
		}
		
		.report-type {
			.type-tag {
				display: inline-block;
				padding: 8rpx 16rpx;
				border-radius: 8rpx;
				font-size: 24rpx;
				font-weight: 500;
				
				&.banqian {
					background: linear-gradient(135deg, #67C23A 0%, #85CE61 100%);
					color: #fff;
				}
				
				&.banhou {
					background: linear-gradient(135deg, #409EFF 0%, #66B1FF 100%);
					color: #fff;
				}
			}
		}
	}
	
	.report-content {
		.content-section {
			margin-bottom: 30rpx;
			
			.section-title {
				display: block;
				font-size: 30rpx;
				font-weight: 600;
				color: #303133;
				margin-bottom: 20rpx;
			}
			
			.content-text {
				background: #f8f9fa;
				border-radius: 12rpx;
				padding: 20rpx;
				min-height: 120rpx;
				
				&.empty {
					background: #f5f7fa;
					text {
						color: #909399;
					}
				}
				
				text {
					font-size: 28rpx;
					color: #333;
					line-height: 1.6;
					white-space: pre-wrap;
					word-break: break-all;
				}
			}
		}
		
		.department-sections {
			margin-bottom: 30rpx;
			
			.department-section {
				margin-bottom: 20rpx;
				
				.dept-title {
					display: block;
					font-size: 28rpx;
					font-weight: 600;
					color: #409EFF;
					margin-bottom: 12rpx;
					padding-left: 20rpx;
					border-left: 4rpx solid #409EFF;
				}
				
				.dept-content {
					background: #f0f9ff;
					border-radius: 12rpx;
					padding: 20rpx;
					margin-left: 24rpx;
					
					text {
						font-size: 26rpx;
						color: #333;
						line-height: 1.6;
						white-space: pre-wrap;
						word-break: break-all;
					}
				}
			}
		}
		
		.photo-section {
			margin-bottom: 30rpx;
			
			.section-title {
				display: block;
				font-size: 30rpx;
				font-weight: 600;
				color: #303133;
				margin-bottom: 20rpx;
			}
			
			.photo-container {
				.report-photo {
					width: 100%;
					height: 400rpx;
					border-radius: 12rpx;
					object-fit: cover;
				}
			}
		}
		
		.comment-section {
			.section-title {
				display: block;
				font-size: 30rpx;
				font-weight: 600;
				color: #303133;
				margin-bottom: 20rpx;
			}
			
			.comment-content {
				background: #fff7e6;
				border-radius: 12rpx;
				padding: 20rpx;
				border-left: 4rpx solid #E6A23C;
				
				.comment-text {
					font-size: 28rpx;
					color: #333;
					line-height: 1.6;
					white-space: pre-wrap;
					word-break: break-all;
				}
			}
		}
	}
}

.loading-container, .error-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
	color: #909399;
	font-size: 28rpx;
	
	.uni-icons {
		margin-bottom: 20rpx;
	}
}

.error-container {
	color: #F56C6C;
}

.action-buttons {
	display: flex;
	justify-content: center;
	margin-top: 40rpx;
	
	.back-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		border: 1px solid #409EFF;
		color: #409EFF;
		border-radius: 8rpx;
		padding: 20rpx 40rpx;
		font-size: 28rpx;
		transition: all 0.3s ease;
		
		.uni-icons {
			margin-right: 8rpx;
		}
		
		&:active {
			background: #409EFF;
			color: #fff;
		}
		
		&::after {
			display: none;
		}
	}
}
</style>
